/** 
 转入转出组件
*/
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import { ProductGroupSepC, SelectC, AvailableAssetC, TradeHoldC, SecondHeaderC, NoDataGrayC } from '../../../comps';
import rollOverDirection from '../../../utils/enumeratedValues/rollOverDirection';
import Hold from '../../InvestmentManage/depositOrderNew/Hold.js';
import config from '../../InvestmentManage/depositOrderNew/config.js';
import mystyle from './style.less';
@Form.create()
class RollInOut extends React.Component {
  state = {
    productId: undefined, // 产品
    portfolio: undefined, //组合
    timeStamp: new Date().getTime(), //时间戳
    currentAsset: undefined,
    holdAmount: undefined,
    securityType: undefined,
  };

  componentDidMount() {
    this.props.onRef(this);
    let tempItem = undefined;
    if (this.props.type == '0') {
      // 债券
      tempItem = '0';
    } else if (this.props.type == '1') {
      // 基金
      tempItem = '2';
    } else if (this.props.type == '3') {
      // 理财直融
      tempItem = '7';
    } else if (this.props.type == '5') {
      // 非标
      tempItem = '12';
    } else if (this.props.type == '6') {
      // 存款
      tempItem = '8';
    }
    this.setState({
      securityType: tempItem, //资产类别
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const {
      form: { setFieldsValue },
    } = this.props;
    if (this.props.type !== nextProps.type) {
      setFieldsValue({
        productidIn: undefined,
        portfolioidIn: undefined,
        productidOut: undefined,
        portfolioidOut: undefined,
      });
      this.setState({ portfolio: undefined, productId: undefined });
      this.props.tradingCodeOnChange();
      if (nextProps.type == '4') {
        this.props.depositData();
      }
      let tempItem = undefined;
      if (nextProps.type == '0') {
        // 债券
        tempItem = '0';
      } else if (nextProps.type == '1') {
        // 基金
        tempItem = '2';
      } else if (nextProps.type == '3') {
        // 理财直融
        tempItem = '7';
      } else if (nextProps.type == '5') {
        // 非标
        tempItem = '12';
      } else if (nextProps.type == '6') {
        // 存款
        tempItem = '8';
      }
      this.setState({
        securityType: tempItem, //资产类别
      });
    }
  }
  // 获取数据
  getInfo = () => {
    const {
      form: { validateFields },
    } = this.props;
    const { currentAsset, holdAmount } = this.state;
    let query = undefined;
    validateFields((err, fieldsValue) => {
      if (!err) {
        query = fieldsValue;
        query.currentAsset = currentAsset;
        query.holdAmount = holdAmount;
      }
    });
    return query;
  };

  //获取持仓双击事件 抛出的指令相关详情
  holdClick = (info) => {
    if (info) {
      this.props.depositData(info, this.props.direction);
    }
  };

  // 产品组合方向
  upData = () => {
    const { direction, type } = this.props;
    return (
      <div className={mystyle.upData}>
        <Row>
          <Col span={16}>
            <ProductGroupSepC
              form={this.props.form}
              title={['产品', '组合']}
              initialValue={undefined}
              multipleGroup={false}
              dataIndex={direction == 1 ? ['productidIn', 'portfolioidIn'] : ['productidOut', 'portfolioidOut']}
              rules={[[{ required: true, message: '请选择产品' }], [{ required: true, message: '请选择组合' }]]}
              groupOnChange={(e) => this.setState({ portfolio: e && e.key })}
              productOnChange={(e) => this.setState({ productId: e && e.key })}
              allowClear={false}
            />
          </Col>
          <Col span={8}>
            <SelectC dataIndex='direction' form={this.props.form} title='方向' initialValue={direction} dataSource={rollOverDirection[type]} disabled={true} />
          </Col>
        </Row>
      </div>
    );
  };

  // 资金持仓数据
  downData = () => {
    const { tradingcode, exchangecode } = this.props;
    const { portfolio } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='当前资金' />
          <AvailableAssetC
            portfolio={portfolio}
            hasHeader={false}
            onChange={(e) => {
              this.setState({
                currentAsset: e,
              });
            }}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='当前持仓' />
          <TradeHoldC
            securityType={this.state.securityType} //
            portfolio={portfolio}
            tradingcode={tradingcode}
            exchangecode={exchangecode}
            hasHeader={false}
            onChange={(e) => {
              this.setState({
                holdAmount: e,
              });
            }}
          />
        </div>
      </div>
    );
  };

  // 回购展示内容
  buBack = () => {
    const { portfolio } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='当前资金' />
          <AvailableAssetC
            portfolio={portfolio}
            hasHeader={false}
            onChange={(e) => {
              this.setState({
                currentAsset: e,
              });
            }}
          />
        </div>
      </div>
    );
  };

  // 存款展示内容
  deposit = () => {
    const { portfolio, productId, timeStamp } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='当前资金' />
          <AvailableAssetC
            portfolio={portfolio}
            hasHeader={false}
            onChange={(e) => {
              this.setState({
                currentAsset: e,
              });
            }}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='当前持仓' />
          <div style={{ position: 'relative' }}>
            <Hold timeStamp={timeStamp} typeList={config.typeList} fundCode={portfolio} productId={productId} type={'2'} doubleClick={this.holdClick} />
            {!portfolio && (
              <div>
                <NoDataGrayC height='45px' title={'请选择组合，加载数据！'} />
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  render() {
    const { type } = this.props;
    return (
      <div>
        {this.upData()}
        {type != '2' && type != '4' && this.downData()}
        {type == '2' && this.buBack()}
        {type == '4' && this.deposit()}
      </div>
    );
  }
}
export default connect(({}) => ({}))(RollInOut);
